import React, { useCallback } from 'react'
import { connect } from 'react-redux'
import {
  Form,
  Select,
  Input,
  Card,
  Button,
  Checkbox,
  message,
} from 'antd';
import styled from 'styled-components';
import { useMount } from 'ahooks';
import { bindActionCreators } from 'redux';
import actions from '../../store/authority/actions';

const { Option } = Select
const StyledCard = styled(Card)`
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  border-radius: 8px;
  width: 368px;
  height: 350px;
  h2{
    margin-bottom: 30px;
  }
`

const LoginView = (props) => {
  const { handleLoginChange } = props
  const [form] = Form.useForm()
  const handleSubmit = useCallback(async () => {
    try {
      const data = await form.validateFields()
      const { adminname, password } = data
      const datas = { adminname, password }
      // console.log(datas)
      handleLoginChange(datas)
    } catch (err) {
      message.error('你个憨批!');
    }
  }, [])
  useMount(() => {
    form.setFieldsValue({ adminname: '雪落下的声音', prefix: '86' })
  })
  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{
          width: 70,
        }}
        bordered={false}
      >
        <Option value="86">+86</Option>
        <Option value="87">+87</Option>
      </Select>
    </Form.Item>
  )
  const onChangeLogin = (e) => {
    console.log(`checked = ${e.target.checked}`);
  }
  const onChangeUser = (e) => {
    console.log(`checked = ${e.target.checked}`);
  }
  const onFill = (e) => {
    console.log('onFill', e);
  }
  const userAgreementButton = (
    <Button type="link" htmlType="button" onClick={onFill}>
      《用户协议》
    </Button>
  )
  return (
    <div className="app-login">
      <div className="app-title">
        <h2>雾芯智慧零售</h2>
        <h1>智能商业生态平台</h1>
        <p>2.0.0全新上线</p>
      </div>
      <StyledCard>
        <h2>密码登录</h2>
        <Form
          form={form}
          name="login"
        >
          <Form.Item
            className="app-telephone"
            name="adminname"
            label="账号"
            colon={false}
            rules={[
              {
                required: true,
                message: '请输入手机号',
              },
            ]}
          >
            <Input
              placeholder="请输入手机号"
              bordered={false}
              addonBefore={prefixSelector}
              style={{
                width: '100%',
              }}
            />
          </Form.Item>
          <Form.Item
            className="app-password"
            name="password"
            label="密码"
            colon={false}
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
            hasFeedback
          >
            <Input.Password placeholder="请输入密码" bordered={false} />
          </Form.Item>
          <Form.Item>
            <Checkbox onChange={onChangeLogin} style={{ marginBottom: '10px' }}>三天内自动登录</Checkbox>
            <Button type="primary" htmlType="button" block onClick={handleSubmit}>
              登录
            </Button>
            <div className="footer">
              <Checkbox onChange={onChangeUser} style={{ marginBottom: '10px' }}>
                阅读并同意
                {userAgreementButton}
              </Checkbox>
              <Button type="link" htmlType="button" onClick={onFill}>
                忘记密码
              </Button>
            </div>
          </Form.Item>
        </Form>
      </StyledCard>
    </div>
  )
}

export default connect(null, (dispatch) => bindActionCreators(actions, dispatch))(LoginView);
